<template>
    <div class="attr">
        <div class="chose_key">
            <select>
                <option>全部机房</option>
                <option>全部机房1</option>
                <option>全部机房2</option>
            </select>
        </div>
        <!--基本信息分布-->
        <div class="baseInfoSpread">
            <div class="title clearfix">
                <div class="title_base">基本信息分布</div>
                <div class="chose_base">
                    <select>
                        <option>性别分布</option>
                        <option>城市分布</option>
                    </select>
                </div>
            </div>
            <div class="barbox">
                <v-bar v-bind:sty="{width:'100%',height:'100%'}"></v-bar>
            </div>
            <div class="table_box">
                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import vBar from '@/components/bar/bar'
export default {
    name:'attr',
    components:{vBar},
    data(){
        return {
            
        }
    }
}
</script>
<style lang="scss" scoped>
    .attr{
        padding:20px;
    }
    .chose_key{
        width:1.2rem;
        height:0.4rem;
        select{
            padding:0.1rem 0.2rem;
            border:1px solid #ccc;
            border-radius:3px;
            font-size:0.14rem;
        }
    }
    .baseInfoSpread{
        border:1px solid #ccc;
        margin-top:0.2rem;
        .title{
            border-bottom:1px solid #ccc;
            .title_base{
                float:left;
                line-height:0.4rem;
                padding-left:0.1rem;
            }
            .chose_base{
                float:right;
                width:1.2rem;
                height:0.4rem;
                border-left:1px solid #ccc;
                select{
                    padding:0.1rem 0.2rem;
                }
            }
        }
    }
    .barbox{
        width:9.3rem;
        height:2rem;
    }
</style>


